<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $.ajax({
            type: 'GET',
            url: 'http://193.112.10.21/user/login/info',
            success: function (res) {
                if (res.success) {
                    window.location.href = 'http://193.112.10.21/admin_index.html'
                }
            }
        })
    </script>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        body{
            background-image: url("./img/loginbg.png"), url("./img/light.png");
            background-position: center top;
            background-repeat: no-repeat;
            background-color:  #1c77ac !important;
        }
        li{
            list-style: none;
        }
        input{
            outline: none;
            border: none;
        }
        .warp{
            height: 100%;
            position: relative;
        }
        .content{
            width: 100%;
            padding-top: 150px;
        }
        .login{
            width: 370px;
            height: 420px;
            background-color: rgba(0,0,0,.4);
            margin: 0 auto;
            border-top: 1px solid rgba(0,0,0,0);
            box-shadow: -4px 5px 8px rgba(0,0,0,.4);
            /*background: url("./img/loginbg.jpg") no-repeat;*/
            /*background-size: cover;*/
        }
        .login>p{
            text-align: center;
            margin-top: 16px;
        }
        .title{
            height: 140px;
            padding-top: 8px;
            position: relative;
        }
        .title img{
            display: block;
            /*float: left;*/
            margin: 0 auto;
        }
        .title .tag{
            text-align: center;
            font-family: 'KaiTi';
            font-size: 20px;
            font-weight: 800;
            color: #bbbec4;
            margin-top: 8px;
            /*position: absolute;*/
            /*top: 50%;*/
            /*left: 140px;*/
            /*margin-top: -15px;*/
        }
        .input_content{
            padding: 20px;
        }
        .input_content li{
            height: 80px;
        }
        .li_input{
            border: 1px solid #dddee1;
            border-radius: 18px;
            overflow: hidden;
            position: relative;
        }
        .li_input i{
            line-height: 36px;
            font-size: 18px;
            position: absolute;
            right: 16px;
            top: 0;
            color: #495060;
        }
        .li_input.active{
            border: 2px solid #2d8cf0;
        }
        .li_input.error{
            border: 1px solid #F56C6C !important;
        }
        .li_input input{
            height: 36px;
            width: 100%;
            line-height: 36px;
            padding-left: 8px;
        }
        .btn{
            height: 40px;
            background-color: #2d8cf0;
            border-radius: 6px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            color: rgba(255,255,255,.6);
        }
        .btn:hover{
            background-color: #5cadff;
        }
        .loginError{
            text-align: center;
            color: #F56C6C;
            margin-top: 8px;
        }
        .btn_mark{
            position: relative;
        }
        .mark{
            position: absolute;
            top: 0;
            left: 0;
            height: 40px;
            width: 100%;
            background-color: rgba(0,0,0,.3);
            border-radius: 6px;
            display: none;
        }
    </style>
    <title>九江燃气后台登录</title>
</head>
<body>
<div class="warp">
    <div class="content">
        <div class="login">
            <div class="title">
                <img src="./img/loginLogo.png" alt="logo" height="110">
                <div class="tag">
                    <p>九江市气瓶安全信息化惠民管理平台</p>
                </div>
            </div>
            <div class="input_content">
                <ul>
                    <li>
                        <div class="username li_input">
                            <input type="text" placeholder="请输入用户名" id="username">
                            <i class="iconfont icon-yonghuming"></i>
                        </div>
                    </li>
                    <li>
                        <div class="password li_input">
                            <input type="password" placeholder="请输入密码" id="password">
                            <i class="iconfont icon-mima"></i>
                        </div>
                        <p class="loginError"></p>
                    </li>
                    <li class="btn_mark">
                        <div class="mark"></div>
                        <div class="btn">登 录</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        // let $username = $('.username')
        // let $password = $('.password')
        var $liInput = $('.li_input')
        var $btn = $('.btn')
        var $error = $('.loginError')
        var $mark = $('.mark')

        $liInput.each(function (i) {
            $(this).find('input').focus(function () {
                $liInput.eq(i).addClass('active')
                $liInput.eq(i).removeClass('error')
            }).blur(function () {
                $liInput.eq(i).removeClass('active')
            })
        })

        $btn.click(function () {
            var username = $('#username').val()
            var password = $('#password').val()
            if (!validate(username, password)) {
                return
            }
            $mark[0].style.display = 'block'
            login(username, password)
        })

        function login (username, password) {
            var params = {
                account: username,
                password: password
            }
            $.ajax({
                type: 'POST',
                headers: {
                    "Content-Type": "application/json;charset=utf-8"
                },
                url: 'http://193.112.10.21/user/login',
                data: JSON.stringify(params),
                success: function (res) {
                    loginError(res)
                    if (res.success) {
                        window.location.href = 'http://193.112.10.21/admin_index.html'
                    }
                }
            })
        }

        function validate (username, password) {
            if (username.trim() === '' || username === null) {
                return false
            }
            if (password.trim() === '' || password === null) {
                return false
            }
            return true
        }

        function loginError (res) {
            if (!res.success) {
                $liInput.each(function (i) {
                    $liInput.eq(i).addClass('error')
                })
                $error[0].innerText = res.errorMessage
                $mark[0].style.display = 'none'
            }
        }
    })
</script>
</body>
</html>